<script setup lang="ts">
import { postSearchAllAPI } from '@/services/search'
import { ref } from 'vue'

let goodValue = ref()
let goodList = ref()

const postSearchAllData = (goodValue: string) => {
    const res = postSearchAllAPI(goodValue)
    goodList.value = res
}
</script>

<template>
    <view>
        <uni-search-bar :focus="true" v-model="goodValue" @cancel="postSearchAllData(goodValue)" bg-color="#fff"
            maxlength="30" cancel-text="搜索" placeholder="搜索商品"></uni-search-bar>
    </view>
    <view class="guess">
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
        <navigator class="guess-item">
            <image src="https://yanxuan-item.nosdn.127.net/26d71d6eb4c00ed727ad9f54ae4ce553.png" class="image"
                mode="aspectFill"></image>
            <view class="name"> 地道卤香好味道，桂林鲜米粉245克*6盒 </view>
            <view class="price">
                <text class="small">¥</text>
                <text>99</text>
            </view>
        </navigator>
    </view>
</template>

<style lang="scss">
page {
    background-color: #f6f6f6;
}

// 商品列表
.guess {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 50rpx 20rpx;

    .guess-item {
        width: 345rpx;
        padding: 24rpx 20rpx 20rpx;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .image {
        width: 304rpx;
        height: 304rpx;
    }

    .name {
        height: 75rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        line-height: 1;
        padding-top: 4rpx;
        color: #cf4444;
        font-size: 26rpx;
    }

    .small {
        font-size: 80%;
    }
}
</style>